import React, { useState, useMemo, useCallback } from 'react';

function Bpp(props){
    const { click2 } = props
    console.log('bpp render');
    return (
        <h1 onClick={click2}>bpp</h1>
    )
}
// 将组建进行渲染优化，如果组件没有更新就不会重新渲染
const BppMemo = React.memo(Bpp)
function App(){
    const [count, setCount] = useState(0)
    // let data = {}
    let data = useMemo(()=>{  // 加上这个useMemo就子组件不重新渲染了
        return {}
    },[])
    
    // function click(){
    //     alert(11)
    // }

    // const click = ()=>{
    //     alert(11)
    // }

    // 用 useCallback优化改造
    const click2 = useCallback(()=>{
        console.log('11')
    },[])

    // const click2 = ()=>{
    //     console.log('11')
    // }

    return (
        <div className='App'>
            <button onClick={()=>setCount(count + 1)}>加一</button>
            {count}
            {/* <Bpp/> */}
            {/* 下面注释的两种没有效果 引用地址变了,而且会遍历props上的属性有了变化就不行 */}
            {/* <BppMemo  data={data} />  */}
            {/* <BppMemo click={click} />  */}


            {/* <BppMemo />  */}
            <BppMemo click2={click2} data={data} /> 

            {/* 下面的这个还是会导致子组件熏染，所以还是会 */}
            {/* <Bpp click2={click2} data={data} />  */}

        </div>
    )
}

export default App
